<template>
  <div>用户管理
  </div>
  <el-divider></el-divider>
    <el-table :data="form.tableData" style="width:100%">
      <el-table-column label="Uid" prop="id" />
      <el-table-column label="昵称" prop="name" />
      <el-table-column label="身高" prop="height" />
      <el-table-column label="体重" prop="weight" />
      <el-table-column label="年龄" prop="age" />
      <el-table-column label="评估" prop="bmi" />
      <el-table-column align="left">
        <template #header>
          <el-row>
            <el-input v-model="form.height" style="width: 80px;"  placeholder="身高检索"  size="small"  />
            <el-button style="margin-left: 10px" @click="searchuser(form.height)">搜索</el-button></el-row>

        </template>
        <template #default="scope">
<!--          <el-button @click="router.push('/manager/analysis');save(scope.row.id,scope.row.name,scope.row.username,scope.row.password,scope.row.height,scope.row.weight,scope.row.age);" >-->
<!--            数据分析</el-button>-->
          <el-button size="small" type="success" style="margin-right: 10px" @click="dialogFormVisible = true;save(scope.row.id,scope.row.name,scope.row.username,scope.row.password,scope.row.height,scope.row.weight,scope.row.age)" plain>
            编辑
          </el-button>
          <el-dialog v-model="dialogFormVisible" title="修改">
            <el-form :model="form">
              <el-form-item label="昵称" :label-width="formLabelWidth" >
                <el-input v-model="form.name" autocomplete="off" />
              </el-form-item>
              <el-form-item label="账号" :label-width="formLabelWidth" >
                <el-input v-model="form.username" autocomplete="off" />
              </el-form-item>
              <el-form-item label="密码" :label-width="formLabelWidth" >
                <el-input type="password" v-model="form.password" autocomplete="off" />
              </el-form-item>
              <el-form-item label="身高" :label-width="formLabelWidth" >
                <el-input v-model="form.height" autocomplete="off" />
              </el-form-item>
              <el-form-item label="体重" :label-width="formLabelWidth" >
                <el-input v-model="form.weight" autocomplete="off" />
              </el-form-item>
              <el-form-item label="年龄" :label-width="formLabelWidth" >
                <el-input v-model="form.age" autocomplete="off" />
              </el-form-item>

            </el-form>
            <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消修改</el-button>
        <el-button type="primary" @click="update();dialogFormVisible = false">
          确定
        </el-button>
      </span>
            </template>
          </el-dialog>
          <el-popconfirm
              style=""
              title="确定删除吗？"
              confirmButtonText='确定'
              cancelButtonText='取消'
              size="small"
              type="danger"
              @click="save(scope.row.id,scope.row.name,scope.row.username,scope.row.password,scope.row.height,scope.row.weight,scope.row.age);deleteperson()"
              plain
          ><template #reference>
            <el-button style=" cursor: pointer;color: red ;" type="danger" plain>删除</el-button>
          </template></el-popconfirm
          >
        </template>
      </el-table-column>
    </el-table>
  </template>

  <script lang="ts" setup>
  import Analysis from "../components/Analysis.vue";
  import router from "../router";
  import {onMounted, reactive, ref, UnwrapRef} from 'vue'
  import {getpersonList,searchUser, post} from '../net';
  import {ElMessage} from "element-plus";
  const parentMsg='a'


  const formLabelWidth = '80px'
  const dialogFormVisible1 = ref(false)
  const dialogFormVisible2 = ref(false)
  const form = reactive({
    id:'',
    name: '',
    username:'',
    password:'',
    height:'',
    weight:'',
    age:'',
    bmi:'',
    times:'',
    tableData: [],
    oldId: '',
    oldName:'',
    oldTimes:''

  })
  const dialogFormVisible = ref(false)
  const search = ref('')
  const save = (id,name,username,password,height,weight,age) => {
    form.id=id
    form.name=name
    form.username=username
    form.password=password
    form.height=height
    form.weight=weight
    form.age=age
  }
  const load=async ()=>{
    form.tableData=(await getpersonList()).data
  }
  onMounted( ()=>{
    load()
  })
  const searchuser=async (height)=>{
    let a=form.height
    if(a!=0){ form.tableData=(await searchUser({a})).data}
    if(a==0){await load()}
  }
  const update =()=> {
    if(!form.name&&!form.height&&!form.weight&&!form.age)
    {
      console.log("555")
      ElMessage.warning('请填写用户信息')
    }
    else {
      post('/user/update', {
        id:form.id,
        age:form.age,
      },{})
      ElMessage.success('修改成功')
      load()
    }
  }
  const deleteperson =()=> {
    console.log(form.oldName)
    post('/user/delete', {
      name:form.oldName,
    },{})
    ElMessage.success('删除成功')
    load()
  }
  </script>
<style  scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
